<template>
    <div class="app">
       <h3>我是根组件----爸爸{{car}}</h3>
       <Son :car="a"/>
       <!-- 通过属性可以给子组件传递数据:基本数据类型数值、引用类型也可以 -->
       <!-- 父组件通过自定义属性给子组件数据 -->
       <!-- 父组件在给子组件数据的时候：'全套装备' 父亲的数据 + 父亲的方法 -->
       <Daughter :gift="car" :changeCar="changeCar"/>
    </div>
</template>
<script>
import Son from '@/components/Son';
import Daughter from '@/components/Daughter'
export default {
  name:'App',
  components:{
    Son,
    Daughter
  },
  data(){
    //父组件的数据【响应式数据】
    return {
       car:"五菱宏观",
    }
  },
  methods: {
    //父亲组件的方法
    changeCar(newCar){
       //父组件实例修改自身的方法
       this.car = newCar;
    }
  },

}
</script>
<style lang="less">
  *{
    margin: 0;
    padding: 0;
  }
  html,body{
    width: 100%;
    height: 100%;
    .app{
      width: 100%;
      height: 100%;
      background: cyan;
      h3{
        text-align: center;
      }
    }
  }
</style>